<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <!-- 
        el2种写法：
            1.在new的时候直接指定el挂载点和data数据
            2.在new的时候先指定data数据，然后通过$mount指定挂载点
        data2种写法：
            1.对象式：
            2.函数式
            目前使用哪种写法均可，以后学习到组件的时候，必须使用函数式
        一个重要的原则：
            由vue管理的函数，一定不能写箭头函数（箭头函数没有自己的this，而是window），一旦写了，this就不是vue实例了，而是window对象
     -->
    <div id="root">我是{{ name }}</div>
    <div id="root2">我是{{ name }}</div>
    <div id="root3">我是{{ name }}</div>
    <div id="root4">我是{{ name }}</div>
    <script>
        Vue.config.productionTip = false;

        // el写法1
        new Vue({
            el: "#root",
            data: {
                name: "xiaoming"
            }
        })

        // el写法2
        const vm = new Vue({
            // el: "#root",
            data: {
                name: "xiaohong"
            }
        })
        // console.log(vm);
        vm.$mount("#root2");

        // data写法1:直接用对象的写法
        new Vue({
            el: "#root3",
            data: {
                name: "xiaowang"
            }
        })

        // data写法2:函数式写法，返回一个对象
        new Vue({
            el: "#root4",
            // data: function(){
            data(){  // 简写
                console.log(this);  // 此处的this是vue实例对象
                return {
                    name: "xiaodong"
                }
            }
        })
        


    </script>
</body>
</html>